<template>
	<view class="page" :class="getThemeClass">
		<!-- 官方公告 -->
		<!-- <unavbar :title="i18n.blog" :isback="false"></unavbar> -->
		<view class="coll-head flex justify-between align-center">
			<!-- <u-tabs 
				:list="types" 
				name="title"
				:is-scroll="true" 
				:current="current" 
				@change="change" 
				:show-bar="false"
				:active-color="getMainColor" 
				:inactive-color="getNavInactiveColor" 
				:bg-color="getBgColor"
			></u-tabs> -->
			<view class="all flex align-center">
				<view :class="act == 1 ? 'active':''">所有</view>
				<view :class="act == 2 ? 'active':''">已关注</view>
				<view :class="act == 3 ? 'active':''">未关注</view>
			</view>
			<view class="rz flex align-center">
				<image src="/static/images/7.png" style="width:40rpx;height:40rpx;"/>艺术家入驻
			</view>
		</view>
		<view class="gap-80"></view>
		<view class="flex justify-between align-center pxt">
			<view class="flex align-center">
				<view class="flex align-center">粉丝<image src="/static/images/8.png" style="width:16rpx;height:8rpx;"/></view>
				<view class="flex align-center">作品<image src="/static/images/8.png" style="width:16rpx;height:8rpx;"/></view>
				<view class="flex align-center">入住时间<image src="/static/images/8.png" style="width:16rpx;height:8rpx;"/></view>
			</view>
		</view>
		<view class="main brown-bg" 
			v-for="(item,index) in blogsData" 
			:key="index"
			@click="openWin('../../blog/blog-def/blog-def?id='+item.id)"
		>
			<!-- 图片 -->
			<!-- <view class="topping card-tag-bg text-content" v-if="item.top_status === 1">
				<u-icon name="pushpin" size="24"></u-icon>
				<text class="u-m-l-0">已置顶</text>
			</view> -->
			<view class="topping1 card-tag-bg text-content">
				关注
			</view>
			<view class="flex">
				<image class="main_image" :src="item.cover" mode="aspectFill"></image>
				<view class="main_right">
					<!-- 标题 -->
					<view class="title">
						{{item.title}}
					</view>
					<view class="main_bot text-tips">
					<view class="two">
						<text>32491粉丝</text>
						<text>725件作品</text>
					</view>
						<!-- <view class="main_flex">
							<u-icon name="eye" size="30" color="#73F6A2"></u-icon>
							浏览量
							<view class="browse_num">{{item.view_num}} 阅读</view>
						</view>
						时间
						<view>{{item.created_at}}</view>
						<view class="label">官方公告</view> -->
					</view>
				</view>
			</view>
				<view class="allI">
					<image src="/static/images/7.png" style="width:88rpx;height:90rpx"></image>
					<image src="/static/images/7.png" style="width:88rpx;height:90rpx"></image>
					<image src="/static/images/7.png" style="width:88rpx;height:90rpx"></image>
					<image src="/static/images/7.png" style="width:88rpx;height:90rpx"></image>
					<image src="/static/images/7.png" style="width:88rpx;height:90rpx"></image>
					<image src="/static/images/7.png" style="width:88rpx;height:90rpx"></image>
					<image src="/static/images/7.png" style="width:88rpx;height:90rpx"></image>
				</view>
		</view>
		<uni-load-more :status="loadStatus" v-if="blogsData.length>0"></uni-load-more>
		<empty v-else></empty>
		<view class="page-bg"></view>
		<u-tabbar
		:list="tabbar" 
		:mid-button="true" 
		:border-top="false"
		inactive-color="#798387"
		active-color="#CAFD5C"
		mid-button-size = "135"
		bg-color="#242424">
		</u-tabbar>
	</view>
</template>

<script>
	import {
		tabbar
	} from "@/common/tabbar.js"
	export default {
		data() {
			return {
				act:1,
				page:1,
				blogsData:[],
				tabbar: tabbar,
				loadStatus:'noMore',
				types:[],
				tabs:[
					{name:'综合公告'},
					{name:'官方公告'},
					{name:'拉新空投'},
					{name:'新品发售'},
					{name:'优先购赋能'},
					{name:'抽签活动'},
					{name:'合成方案'},
					{name:'其他公告'},
				],
				current:0,
				type:null
			};
		},
		onShow() {
			this.getDatatype()
			// this.setTabBar()
		},
		onReachBottom() {
			if(this.loadStatus=='noMore')return
			this.page ++
			this.getDatalist()
		},
		methods: {
			change(index) {
				
				this.current = index;
				this.type = this.types[index].id
				console.log(this.type);
				this.getDatalist(true)
			},
			getDatatype(){
				this.$u.api.news_type({
				}).then(res=>{
					this.types = res.data.types
					this.type = res.data.types[0].id
					this.getDatalist(true)
				})
			},
			getDatalist(flag) {
				if(flag)this.page=1
				this.$u.api.news_list({
					page:this.page,
					type:this.type,
					limit:10
				}).then(res => {
					if(res.code == 200){
						this.blogsData = flag? res.data.list.data : this.blogsData.concat(res.data.list.data)
						this.loadStatus = res.data.list.next_page_url?'more':'noMore'
					}
				}).catch(err => {

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.topping1{
	position:absolute;
	top:40rpx;
	right:40rpx;
	background:#CAFD5C;
	border-radius:25rpx;
	color:#000;
	font-size:28rpx;
	width:132rpx;
	height:50rpx;
	text-align:center;
	line-height:50rpx
	}
.two text{
	font-size: 24rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 28rpx;
}
.allI{display:flex;overflow-x:auto;width:100%;margin-top:32rpx}
.allI image{margin-right:20rpx}
.pxt{
	margin-top:30rpx;
	padding-left:32rpx;
	padding-right:32rpx;
	font-size: 24rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: rgba(255,255,255,0.8);
	line-height: 28rpx;
}
.pxt image{margin-left:5px;margin-right:10px}
.rz{
	background-color:#333;
	border-radius:78rpx;
	color: #CAFD5C;
	font-size: 24rpx;
	padding:4px 8px;
}
.rz image{
	margin-right:5px;font-size: 24rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #CAFD5C;
}
.all view{
	font-size: 24rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: rgba(255,255,255,0.8);
	line-height: 28rpx;
	background:#262626;
	border-radius:30rpx;
	margin-right:20rpx;
	//padding:3px 8px;
	width: 108rpx;
	background: rgba(255,255,255,0.15);
	border-radius: 78rpx 78rpx 78rpx 78rpx;
	opacity: 1;
	justify-content: center;
	text-align: center;
	height:54rpx;
	line-height:54rpx;
}
.all view.active{color:#fff;border: 2rpx solid #CAFD5C;}
	.page{
		padding-top: 0;
	}
	.coll-head{
		width: 750rpx;
		position: fixed;
		// top: calc(44px + var(--status-bar-height));
		// left: 0;
		z-index: 10;
		padding-left:30rpx;
		padding-right:30rpx;
	}

	.main {
		margin: 28rpx;
		padding: 30rpx 26rpx;
	//	display: flex;
		border-radius: 20rpx;
		//box-shadow: 0rpx 5rpx 10rpx 1rpx rgba(134, 249, 175, 0.3);
		background-color:#202020;
		position: relative;
		
		.topping{
			position: absolute;
			top: 0;
			right: 0;
			font-size: 22rpx;
			padding: 5rpx 15rpx;
			border-radius: 0rpx 20rpx 0rpx 20rpx;
		}

		.main_image {
			width: 76rpx;
			height: 76rpx;
			margin: 10rpx;
			border-radius: 50%;
		}

		.main_right {
			flex: 1;
			display: flex;
			margin-left: 20rpx;
			flex-wrap: wrap;
			//flex-direction: column;
			justify-content: space-between;
		}

		.title {
			width: 100%;
			font-size: 30rpx;
			font-weight: bold;
			overflow: hidden;
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			//line-height: 33rpx;
		}

		.main_bot {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 22rpx;
			.main_flex {
				display: flex;
				align-items: center;

				.browse_num {
					margin-left: 10rpx;
				}
			}
			.label{
				width: 106rpx;
				height: 38rpx;
				line-height: 38rpx;
				background: #F1F1F2;
				border-radius: 10rpx;
				text-align: center;
			}
		}
	}
</style>
